<template>
  <div class="community-detail">
    <!-- head -->
    <qy-navigation></qy-navigation>
    <!-- content -->
    <div class="content qy-box-space">
      <div class="container">
        <div class="row" style="text-align:left" ><h2>个人资料</h2></div>
        <div class="row" >
          <div class="row-title" >头像</div>
          <div class="row-upload" >
             <el-image
              style="width: 70px; height: 70px;margin-right:20px;"
              :src="imageSingle.url"
              fit="fill"></el-image>
             <Upload-file
              uploadType='file' 
              @getChildVal='getChildVal'
             ></Upload-file>
          </div>
        </div>
        <div class="row" >
          <div class="row-title" >用户名</div>
          <div class="row-con" >
            <el-input v-model="formData.user_name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="row" >
          <div class="row-title" >职位</div>
          <div class="row-con" >
            <el-input v-model="formData.position" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="row" >
          <div class="row-title" >公司</div>
          <div class="row-con" >
            <el-input v-model="formData.company" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="row" >
          <div class="row-title" >个人介绍</div>
          <div class="row-con" >
            <el-input v-model="formData.introduce" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="row-submit" >
          <el-button type="primary" @click="controller('save')">保存</el-button>
        </div>
      </div>
      <!-- container-right -->
      <div class="label"></div>
    </div>
  </div>
</template>

<script>
import Request from '@/server/http'
import Api from '@/server/api'
import UploadFile from '@/components/upload/upload.vue'
export default {
  components: {
    "Upload-file": UploadFile
  },
  name: "CenterEdit",
  data() {
    return {
      imageSingle:{url:'',file:''},
      formData:{
        user_name:'',
        company:'',
        position:'',
        introduce:''
      }
    };
  },
  computed: {
    listenResponseVal() {
      return this.$store.state.communityResponseValue;
    }
  },
  methods: {
    // get init data
    getData() {
      Request.requestPost('', Api.apiUser.userinfo)
        .then((res) => {
          console.log(res);
          this.formData = res.data.data
          this.imageSingle.url = res.data.data.avatar_url
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // submit data
    submitData() {
      let formData = new FormData();
      formData.append('formData',JSON.stringify(this.formData));
      formData.append('image', this.imageSingle.file);
      Request.requestFormData(formData, Api.apiUser.update)
        .then((res) => {
          console.log(res)
          if(res.data.code == '1'){
            this.$router.push({path:'/center'})
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //获取子组件值
    getChildVal(e){
      console.log(e)
      this.imageSingle.url = e.url 
      this.imageSingle.file = e.file
    },
    //controller
    controller(name) {
      switch (name) {
        case "save":
          console.log(this.fileList)
          this.submitData()
          break;
        default:
          break;
      }
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:rgba(204,204,204,0.2)");
  },
  mounted() {
    this.getData()
  }
};
</script>

<style scoped lang="scss">
@import "@/styles/variable.scss";
.el-icon-thumb:hover{
  color: $blue-weight ;
}
//common
.kl-inner-padl5{
  padding-left: 5px;
}
// content
.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .container {
    width: 75%;
    height: 70vh;
    margin-right: 40px;
    background-color: $white;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .row{
      width: 80%;
      margin-left: 0%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 15px 0;
    }
    .row-submit{
      width: 80%;
      text-align: left;
      padding: 15px 0;
    }
    .row .row-title{
      width: 10%;
      text-align: left;
      margin-right: 10px;
    }
    .row .row-con{
      width: 80%;
    }
    .row .row-upload{
      width: 80%;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
  }
  //right-lable
  .label {
    width: 25%;
    height: 60vh;
    background-color: $white;
  }
}

</style>
